import React, {useEffect, useMemo, useState} from 'react';
import {Card,Empty,Button,Space,Tabs} from "antd-mobile"
import MLayout from "@/cms/MLayout";
import dayjs from "dayjs";
import {ATag, Seat} from "@/cms/layout";
import s from "./cys.module.less"
import copyText from "@/utils/copyText";
import {message} from "antd";
import {GetState} from "@/utils/constant";
import useOpenid from "@/pages/wx/use/useOpenid";

function OrderList(props) {
    const [list,setList] = useState([]),
        [teaerInfo,setTeaerInfo] = useState({}),
        {openid} = useOpenid();
    function getTeaerInfo() {
        ax.get("/app/teaerRegStatus", {
            params: {
                openid
            }
        }).then(res => {
            setTeaerInfo(res.data);
            setTimeout(()=>{
                queryList(2)
            })
        })
    }
    function getStatusBtn(status,id){
        if (status === 2){
            return <Button
                color='primary'
                onClick={() => {
                    changeOrderStatus(3,id)
                }}
            >
                已到店
            </Button>
        }
        if (status === 3){
            return <Button
                color='primary'
                onClick={() => {
                    changeOrderStatus(4,id)
                }}
            >
                结束订单
            </Button>
        }
    }
    function changeOrderStatus(status,orderId){
        ax.post("/app/changeOrderStatus",{
            id:orderId,
            status
        }).then(res=>{
            res.message && message.success(res.message)
            queryList()
        })
    }
    function getStatus(status){
        if (status === 1){
            return "待支付"
        }
        if (status === 2){
            return "待到店"
        }
        if (status === 3){
            return "服务中"
        }
        if (status === 4){
            return "服务完成"
        }
    }
    const page = useMemo(()=>{
        if (list.length){
            return list.map(item=>{
                const {phone,remark,dpName} = JSON.parse(item.remark ||"{}")
                return <Card title={
                    <div className={s.cardTitle}>
                        <span>{dpName}</span>
                        <span>{getStatus(item.status)}</span>
                    </div>
                } style={{marginBottom:"20px"}} >
                    <p>
                        <span>预约时间：</span>
                        <span>
                            {dayjs(item.startTime).format("YYYY-MM-DD HH:mm")} - {dayjs(item.endTime).format("HH:mm")}
                        </span>
                    </p>
                    <Seat h={10}/>
                    <p>
                        <span>联系方式：</span>
                        <span>{phone}</span>
                        <Seat w={15}/>
                        <ATag onClick={()=>copyText(phone)}>复制手机号</ATag>
                    </p>
                    <Seat h={10}/>
                    <p>
                        <span>备注：</span>
                        <span>{remark}</span>
                    </p>
                    <Seat h={10}/>
                    <div className={s.footer} onClick={e => e.stopPropagation()}>
                        <Space>
                            {
                                getStatusBtn(item.status,item.ID)
                            }

                        </Space>
                    </div>
                </Card>
            })
        }
        return <Empty
            style={{ padding: '84px 0' }}
            imageStyle={{ width: 128 }}
            description='暂无数据'
        />
    },[list])
    async function queryList(status){
        const info = await GetState(setTeaerInfo)
        console.log(info)
        ax.get("/app/orderList",{
            params:{
                current:1,
                pageSize:100,
                type:4,
                userId:info.ID,
                status
            }
        }).then(res=>{
            setList(res.data);
        })
    }
    useEffect(()=>{
        if (openid){
            getTeaerInfo()
        }
    },[openid])
    function onTabChange(e){
        queryList(e)
    }
    return (
        <MLayout bodyStyle={{padding:0}} type={"cys"}>
            <div className={s.wrap}>
                <Tabs onChange={onTabChange}>
                    <Tabs.Tab title='待到店' key='2' />
                    <Tabs.Tab title='服务中' key='3' />
                    <Tabs.Tab title='已完成' key='4' />
                </Tabs>
                <div className={s.ord}>
                    {
                        page
                    }
                </div>
            </div>

        </MLayout>
    );
}

export default OrderList;